@import "variables";
@import "mixins";

.topbar{
  width: 100%;
  height: $topbar-height;
  line-height: $topbar-line-height;
  color: $gray;
  background-color: $light;
  
  .topnav{
    a{
      position: relative;
      margin-left: 8px;
    }
    i{
      position: absolute;
      left: 0;
      font-size: 12px;
      color: $gray-light;
    }
    span{
      margin-left: 15px;
    }
  }
}
.li-spacing{
    display: inline-block;
    margin: 0 8px;
    width: 1px;
    height: 10px;
    background-color: $gray;
  }
.header{
  height: 159px;
  @include user-select(none);
  background: url(../../images/header-bg.png) bottom center no-repeat;
  .logo{
    margin-top: 45px;
    width: 295px;
    height: 68px;
    @include text-hide();
    background: url(../../images/logo.png) left center no-repeat;
  }
  .search{
    margin-top: 42px;
    dl.keyword{
      position: relative;
      padding-top: 20px;
      margin: 0;
      width: 310px;
      color: $gray;
      dt{
        position: absolute;
      }
      dd{
        margin-left: 45px;
      }
      a{
        display: inline-block;
        margin-right: 5px;
        margin-bottom: 5px;
        word-break:keep-all;
        white-space:nowrap;
      &:last-child{
        margin-right: 0;
      }
      }
    }
  }
}
.search-group{
  .input-icon{
    position: relative;
    float: left;
    span{
      position: absolute;
      display: inline;
      z-index: 50;
      top: 5px;
      left: 10px;
      font-size: 14px;
      color: $gray-lighter;
    }
    input[type='search']{
      @include box-sizing(border-box);
      display: block;
      padding: $padding-small-vertical $padding-base-horizontal;
      padding-left: 30px;
      width: 250px;
      height: $input-height-base;
      line-height: $line-height-base;
      border: 1px solid $input-border;
      border-right-width: 0;
      border-radius: $input-border-radius;
      @include border-right-radius(0);
      color: $input-color;
      @include placeholder();
      @include form-control-focus($gray-light);
      background-color: $input-bg;
    }
  }
  .search-btn{
    float: left;
    padding: 0 $padding-large-horizontal;
    height: $input-height-base;
    line-height: $line-height-base;
    @include border-left-radius(0);
  }
}
.nav{
  height: $nav-height;
  background-color: $brand;
  .nav-desktop{
    padding: 0;
    margin: 0;
    list-style-type: none;
    li{
      float: left;
      border-right: 1px solid rgba(255, 255, 255, 0.2);
    }
    li:last-child{
      border-right: none;
    }
    a{
      display: block;
      padding: 0 26px;
      height: $nav-height;
      line-height: $nav-line-height;
      font-size: $font-size-large;
      color: $btn-red-color;
      background-color: $brand;
      &:hover,
      &.active{
        background-color: darken($brand, 5%);
      }
      i{
        padding-right: 10px;
      }
    }
  }
}